<template>
    <div v-insertHideInput="handleChangeSearchQuery">
        <!-- v-insertHideInput -->
        <!-- <a-input @keypress.enter="handleChangeSearchQuery" /> -->
        <flexbox wrap="wrap">
            <flexbox class="margin-b-16">
                <span class="margin-r-16">查询周期：</span>
                <a-select v-model:value="tongjiType" style="width: 200px" class="margin-r-8" @change="handleSelectTongjiTypeChange">
                    <a-select-option key="1">按月份查询</a-select-option>
                    <a-select-option key="2">按季度查询</a-select-option>
                    <a-select-option key="3">按年度查询</a-select-option>
                </a-select>
                <h-range-picker-cell
                    :value="[startTime ? $moment(startTime, 'YYYY-MM-DD') : null, endTime ? $moment(endTime, 'YYYY-MM-DD') : null]"
                    class="margin-r-16"
                    @change="rangeDateChange"
                    v-if="tongjiType === '4'"
                />
                <h-year-picker-cell :allowClear="false" v-model:value="selectYear" class="margin-r-16" @change="handleSelectYearChange" v-else />
                <a-select
                    v-model:value="selectMonthOrQuarter"
                    style="width: 100px"
                    class="margin-r-16"
                    v-if="['1', '2'].includes(tongjiType)"
                    @change="handleTimeChange"
                >
                    <a-select-option v-for="item of timeOptions" :key="item.name" :value="item.value">
                        {{ item.name }}
                    </a-select-option>
                </a-select>
            </flexbox>

            <flexbox class="margin-b-16 margin-r-16">
                <span class="margin-r-16">负责人：</span>
                <h-search-select-cell
                    :default-value="form.createUser"
                    label="name"
                    type="allUser"
                    allowClear
                    style="min-width: 200px"
                    @success="handleSelectChange"
                >
                    <template #label="{ record }"> {{ record.name }}（{{ record.empId }}） </template>
                </h-search-select-cell>
            </flexbox>

            <flexbox class="margin-b-16 margin-r-16">
                <span class="margin-r-16">是否关联业务需求：</span>
                <a-select v-model:value="form.isConnectBusiness" style="width: 60px" allowClear class="margin-r-8">
                    <a-select-option key="1">是</a-select-option>
                    <a-select-option key="0">否</a-select-option>
                </a-select>
            </flexbox>

            <flexbox class="margin-b-16 margin-r-16">
                <span class="margin-r-16">是否存在时间轴异常：</span>
                <a-select v-model:value="form.isWrongTimeIndex" style="width: 60px" allowClear class="margin-r-8">
                    <a-select-option key="1">是</a-select-option>
                    <a-select-option key="0">否</a-select-option>
                </a-select>
            </flexbox>

            <flexbox class="margin-b-16 margin-r-16">
                <span class="margin-r-16">是否全生命周期研发流程管理：</span>
                <a-select v-model:value="form.isOutsideSystem" style="width: 60px" allowClear class="margin-r-8">
                    <a-select-option key="0">是</a-select-option>
                    <a-select-option key="1">否</a-select-option>
                </a-select>
            </flexbox>

            <flexbox class="margin-b-16 margin-r-16">
                <span class="margin-r-16">是否开启上线验证工单：</span>
                <a-select v-model:value="form.isCheckWorkOrder" style="width: 60px" allowClear class="margin-r-8">
                    <a-select-option key="1">是</a-select-option>
                    <a-select-option key="0">否</a-select-option>
                </a-select>
            </flexbox>
            <flexbox style="flex: 1" justify="flex-end" class="margin-b-16 margin-l-16">
                <a-button type="primary" @click="handleChangeSearchQuery">查询</a-button>
                <a-button type="primary" class="margin-l-8" @click="exportFile" v-if="list.length">导出</a-button>
            </flexbox>
        </flexbox>
    </div>
</template>

<script lang="ts">
import moment from 'moment';
import api from '@/api';
import { downByBlob } from '@/utils/file/downFile';
import { HYearPickerCell, HRangePickerCell, HSearchSelectCell } from '@/components';
import { ref, unref, defineComponent, reactive, toRefs, computed, onMounted } from 'vue';
export default defineComponent({
    components: {
        HYearPickerCell,
        HRangePickerCell,
        HSearchSelectCell
    },
    props: {
        list: {
            type: Array,
            default: () => []
        }
    },
    emits: ['change'],
    setup(_, { emit }) {
        const state = reactive<any>({
            tongjiType: '1',
            selectYear: moment().year().toString(),
            selectMonthOrQuarter: 1,
            deliveryMode: null,
            isRequireAnalyse: '否',
            startTime: '',
            endTime: '',

            form: {
                isConnectBusiness: null,
                isWrongTimeIndex: null,
                isOutsideSystem: null,
                isCheckWorkOrder: null,
                createUserEmpId: null
            },
            createUser: null
        });
        const keliduOptions = computed(() => {
            if (state.tongjiType === '1') {
                return [
                    { name: '周', value: '1' },
                    { name: '预发布版本', value: '3' }
                ];
            } else if (state.tongjiType === '3') {
                return [
                    { name: '月份', value: '2' },
                    { name: '季度', value: '4' },
                    { name: '预发布版本统计', value: '3' }
                ];
            } else {
                return [
                    { name: '月份', value: '2' },
                    { name: '预发布版本', value: '3' }
                ];
            }
        });
        const timeOptions = computed(() => {
            if (state.tongjiType === '1') {
                return new Array(12).fill(' ').map((item, index) => ({ name: `${index + 1}月份`, value: index + 1 }));
            } else if (state.tongjiType === '2') {
                return new Array(4).fill(' ').map((item, index) => ({ name: `${index + 1}季度`, value: index + 1 }));
            }
        });
        const handleSelectTongjiTypeChange = (val) => {
            state.selectMonthOrQuarter = 1;
            getRangeDate();
        };
        const handleTimeChange = (val) => {
            state.selectMonthOrQuarter = val;
            getRangeDate();
        };
        const handleSelectYearChange = () => {
            getRangeDate();
        };
        const rangeDateChange = (val) => {
            const { startTime, endTime } = val;
            state.startTime = startTime;
            state.endTime = endTime;
        };
        const getRangeDate = () => {
            if (state.tongjiType === '3') {
                state.startTime = moment(state.selectYear.toString()).startOf('year').format('YYYY-MM-DD HH:mm:ss');
                state.endTime = moment(state.selectYear.toString()).endOf('year').format('YYYY-MM-DD HH:mm:ss');
            } else {
                const val = state.selectMonthOrQuarter;
                if (state.tongjiType === '1') {
                    state.startTime = moment(state.selectYear.toString())
                        .month(val - 1)
                        .startOf('month')
                        .format('YYYY-MM-DD HH:mm:ss');
                    state.endTime = moment(state.selectYear.toString())
                        .month(val - 1)
                        .endOf('month')
                        .format('YYYY-MM-DD HH:mm:ss');
                } else {
                    state.startTime = moment(state.selectYear.toString()).quarter(val).startOf('quarter').format('YYYY-MM-DD HH:mm:ss');
                    state.endTime = moment(state.selectYear.toString()).quarter(val).endOf('quarter').format('YYYY-MM-DD HH:mm:ss');
                }
            }
        };

        const handleSelectChange = (val) => {
            if (val && val.empId) {
                state.form.createUserEmpId = val.empId;
                state.createUser = val.name;
            } else {
                state.form.createUserEmpId = null;
                state.createUser = null;
            }
        };

        const exportFile = async () => {
            const query = {
                versionOnlineRealTimeStart: state.startTime,
                versionOnlineRealTimeEnd: state.endTime,
                ...state.form
            };
            const res = await api.requireTrackModel.prsDown(query, { responseType: 'blob' });
            res && downByBlob(res, `${state.startTime}~${state.endTime}制品规范性` + '.xls');
        };

        const handleChangeSearchQuery = () => {
            emit('change', {
                versionOnlineRealTimeStart: state.startTime,
                versionOnlineRealTimeEnd: state.endTime,
                ...state.form
            });
        };
        getRangeDate();
        handleChangeSearchQuery();
        return {
            ...toRefs(state),
            keliduOptions,
            timeOptions,
            handleSelectTongjiTypeChange,
            handleSelectYearChange,
            rangeDateChange,
            handleTimeChange,
            handleSelectChange,
            handleChangeSearchQuery,
            exportFile
        };
    }
});
</script>

<style scoped lang="less">
::v-deep(.ant-select-selector) {
    height: 31px !important;
}
</style>